// MainPage.tsx
import React from 'react';
import { Link } from 'umi';
import styles from './mainPage.scss';
import background from '@/assets/MainPage/background.png'; // 确保路径正确
import sym from '@/assets/MainPage/sym.png'
import pic1 from '@/assets/MainPage/pic1.png'
import pic2 from '@/assets/MainPage/pic2.png'

const MainPage: React.FC = () => {
  return (
    <div className={styles.mainContainer}>
      <center>
        <div>
          <h1>企业实习管理系统</h1>
          <p>连接学生与企业的桥梁</p>
        </div>
      </center>
      <div className={styles.hero}>
        <img src={sym} alt="Hero Image" className={styles.heroImage}/>
        <div className={styles.heroContent}>
          <h2>探索无限可能</h2>
          <p>为学生提供最优质的实习机会，为企业发掘最具潜力的人才。</p>
          <button className={styles.exploreButton}>
            <Link to="/login" className={styles.link}>
              立即登录
            </Link>
          </button>
        </div>
      </div>
      <main className={styles.mainContent}>
        <section className={styles.features}>
          <div className={styles.feature}>
            <h3>实习机会</h3>
            <p>超过1000个实习机会等你来探索</p>
          </div>
          <div className={styles.feature}>
            <h3>合作企业</h3>
            <p>与500+知名企业合作，提供真实工作环境</p>
          </div>
          <div className={styles.feature}>
            <h3>职业发展</h3>
            <p>专业指导，助力你的职业发展</p>
          </div>
        </section>
        <h2>成功案例</h2>
        <section className={styles.successStories}>
          <div className={styles.story}>
            <img src={pic1} alt="Success Story" className={styles.storyImage}/>
            <p>W通过实习获得了宝贵的工作经验，并最终获得了全职工作机会。</p>
          </div>
          <div className={styles.story}>
            <img src={pic2} alt="Success Story" className={styles.storyImage}/>
            <p>Y在实习期间完成了一个重要项目，获得了公司的高度评价。</p>
          </div>
        </section>
      </main>
      <footer className={styles.footer}>
        <p>版权所有 © 2024 企业实习管理系统</p>
      </footer>
    </div>
  );
};

export default MainPage;
